<template>
  <div class="ad-chart-w">
    <Title>
      <template #content>
        <p class="title">广告活动关键词TOP100</p>
      </template>
    </Title>
    <a-table style="margin-top: 20px" class="table-singe-line" ref="tableRef" row-key="id" :loading="tableLoading" :bordered="false" :data="tableList" :scroll="{ x: '100%', y: '400px' }" size="mini" @sorter-change="sorterChange" :pagination="false">
      <template #columns>
        <a-table-column :width="45" title="序号" data-index="sort" fixed="left">
          <template #cell="{ rowIndex }">
            <p>{{ rowIndex + 1 }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="160" title="关键词" data-index="keywordText" fixed="left" />
        <a-table-column :width="120" title="所属广告活动" data-index="campaignName" fixed="left" />
        <a-table-column :width="85" :sortable="sortable" data-index="impressions" align="right">
          <template #title>
            <a-popover content="广告被展示的次数">
              <p>
                <span>曝光量</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="85" :sortable="sortable" data-index="clicks" align="right">
          <template #title>
            <a-popover content="广告被点击的次数">
              <p>
                <span>点击量</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
        </a-table-column>
        <a-table-column :width="75" title="CTR" :sortable="sortable" data-index="ctr" align="right">
          <template #title>
            <a-popover content="广告点击转化率=点击量/曝光量">
              <p>
                <span>CTR</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ Number(record.ctr).toFixed(2) }}%</p>
          </template>
        </a-table-column>
        <a-table-column :width="75" title="CPC" :sortable="sortable" data-index="cpc" align="right">
          <template #title>
            <a-popover content="单次点击成本，CPC=广告花费/点击量">
              <p>
                <span>CPC</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ currencySymbol[searchParams.currencyCode] }}{{ Number(record.cpc).toFixed(2) }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="75" :sortable="sortable" data-index="cost" align="right">
          <template #title>
            <a-popover content="亚马逊广告花费">
              <p>
                <span>花费</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ currencySymbol[searchParams.currencyCode] }}{{ Number(record.cost).toFixed(2) }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="110" title="广告总单量" :sortable="sortable" data-index="purchasesOrder" align="right">
          <template #title>
            <a-popover content="广告带来的订单及关联订单数量">
              <p>
                <span>广告总单量</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ record.purchasesOrder }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="110" title="广告销售额" :sortable="sortable" data-index="saleAmount" align="right">
          <template #title>
            <a-popover content="广告带来的销售额及关联销售额">
              <p>
                <span>广告销售额</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ currencySymbol[searchParams.currencyCode] }}{{ Number(record.saleAmount).toFixed(2) }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="85" title="ACOS" :sortable="sortable" data-index="acos" align="right">
          <template #title>
            <a-popover content="投入产出比，ACOS=广告花费/广告销售额*100%">
              <p>
                <span>ACOS</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ Number(record.acos).toFixed(2) }}%</p>
          </template>
        </a-table-column>
        <a-table-column :width="75" title="CVR" :sortable="sortable" data-index="cvr" align="right">
          <template #title>
            <a-popover content="广告转化率，CVR=广告订单量/点击量*100%">
              <p>
                <span>CVR</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ Number(record.cvr).toFixed(2) }}%</p>
          </template>
        </a-table-column>
        <a-table-column :width="75" title="CPA" :sortable="sortable" data-index="cpa" align="right">
          <template #title>
            <a-popover content="单笔订单平均广告花费，CPA=广告花费/广告订单量">
              <p>
                <span>CPA</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ currencySymbol[searchParams.currencyCode] }}{{ Number(record.cpa).toFixed(2) }}</p>
          </template>
        </a-table-column>
        <a-table-column :width="85" title="ROAS" :sortable="sortable" data-index="roas" align="right">
          <template #title>
            <a-popover content="支出回报，ROAS=广告销售额/广告花费">
              <p>
                <span>ROAS</span>
                <icon-question-circle />
              </p>
            </a-popover>
          </template>
          <template #cell="{ record }">
            <p>{{ Number(record.roas).toFixed(2) }}</p>
          </template>
        </a-table-column>
      </template>
    </a-table>
  </div>
</template>
<script lang="ts" setup>
  import Title from '@/views/index/components/Title.vue'
  import { ref, reactive } from 'vue'
  import { getOverallKeywordRanking } from '@/api/advert'
  import { currencySymbol } from '@/utils/globalData'
  const props = defineProps({
    searchParams: {
      type: Object,
      default: () => {},
    },
    targetMap: {
      type: Object,
      default: () => {},
    },
  })

  const tableList = ref<Array<any>>([])
  const tableLoading = ref(false)
  const sortable = reactive({
    sortDirections: ['descend', 'ascend'],
    sorter: true,
  }) as any
  let searchVal: any = {
    pageSize: 100,
    pageNum: 1,
  }

  // 排序
  function sorterChange(dataIndex: string, direction: string) {
    if (!direction) {
      searchVal.orderItems = null
    } else {
      searchVal.orderItems = [
        {
          asc: direction == 'ascend' ? true : false,
          column: dataIndex,
        },
      ]
    }
    getTableList()
  }

  // 刷新数据
  async function refreshData() {
    getTableList()
  }
  async function getTableList() {
    if (!props.searchParams.startDate) return
    tableLoading.value = true
    const res: any = await getOverallKeywordRanking({
      ...props.searchParams,
      ...searchVal,
    })
    tableLoading.value = false
    tableList.value = res?.data?.data || []
  }

  defineExpose({ refreshData })
</script>
<style lang="less" scoped>
  .ad-chart-w {
    margin-top: 10px;
    background-color: #fff;
    padding: 20px 20px;
    position: relative;
  }
  :deep(.arco-radio-group-button) {
    padding: 0;
    .arco-radio-button {
      margin: 0;
      background-color: #fff;
      line-height: 26px;
      border: 1px solid var(--color-border);
      &:first-child {
        border-radius: 4px 0 0 4px;
      }
      &:last-child {
        border-radius: 0 4px 4px 0;
      }
    }
    .arco-radio-checked {
      border-color: rgb(var(--primary-6));
    }
  }
  :deep(.arco-table-sorter) {
    margin-left: 2px;
  }
</style>
